<template>
  <div class="m-10">
    <button @click="toggle(1, true)">显示组件</button>
    <button @click="toggle(1, false)">销毁组件</button>
    <button @click="toggle(2, true)">显示dom</button>
    <button @click="toggle(2, false)">销毁dom</button>
    <div v-if="isComponent">
      <some-thing v-for="v in list" :key="v" :count="v" />
    </div>

    <div v-if="isDom">
      <div v-for="v in list" :key="v">{{ v }}</div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, nextTick } from '@vue/composition-api'
import someThing from './someThing.vue'
export default defineComponent({
  components: { someThing },
  setup() {
    const state = reactive({
      list: Array.from(Array(1000), (v, k) => k + 1),
      isComponent: false,
      isDom: false,
    })
    function toggle(type, value) {
      if (type == 1) {
        state.isComponent = value
      } else {
        state.isDom = value
      }
      let label = (type == 1 ? '组件' : 'dom') + (value ? '加载' : '卸载')
      console.time(label)
      nextTick(() => {
        console.timeEnd(label)
      })
    }

    return { ...toRefs(state), toggle }
  },
})
</script>

 <style>
button {
  margin: 10px;
}
</style>